<!--  手机端-->
<template>
  <div>
    <!-- 课程图片 -->
    <div class="trialClass-img">
      <img v-lazy="moveList.homeImg" class="item-img"/>
      <div class="my-feature">
        <img v-lazy="moveList.feature" class="feature-img"/>
        <div class="my-title">我们的课程特色</div>
      </div>
      <!-- 特色动图 -->
      <div class="gifImg-list">
       <div class="item-conter-img">
         <img src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/move/master_v2.png" class="gif-text"/>
       </div>
      </div>
      <!-- 科学规划 -->
      <div class="scientific">
        <div class="back-box">
           <img src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/move/move3.png" class="back-img"/>
        </div>
        <img src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/move/move4.png" class="promote"/>
      </div>
      <!-- 贴心服务 -->
      <div class="serve">
        <div class="serve-title">
           <img style="width:2.133vw;height:3.2vw;margin-right:1.067vw;display: block;" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/adorn.png"/>
          贴心服务 严选师资
           <img style="width:2.133vw;height:3.2vw;margin-left:1.067vw;display: block;" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/adorn.png"/>
        </div>
        <div class="teacher-box">
          <div class="item-img-name" v-for="(item,index) in teacherList" :key="item.id">
            <img class="img" :src="item.urlImg"/>
            <div class="name">{{ item.name }}</div>
            <div class="subTitle">{{ item.subTitle }}</div>
          </div>
        </div>
      </div>
      <!-- 人才招聘 -->
      <div class="invite">
        <div>
          <span>人才招聘</span>&nbsp;&nbsp;&nbsp;
          <span>HRVI@JinLinJiShu.com</span>
        </div>
        <div class="business">
          <div class="business-title">商务合作</div>
          <div>
            <div>韩先生 181 2459 6051 （微信同号）</div>
            <div>BDVI@JinLinJiShu.com</div>
            <div>*现暂开放微代理模式</div>          
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="footer-company">
        <div class="company">Copyright @ 2021深圳市锦鳞技术有限公司 版权所有</div>
        <a 
          target="_blank"  
          href="https://beian.miit.gov.cn" 
          class="secuity-name-img"
        >
          粤ICP备2021117518号
        </a>
       <a 
          target="_blank"
          :href="business"
          class="secuity-name-img"
        >
          增值电信业务经营许可证：粤B2-20211536
        </a>
        <div class="icpcode">
          <a 
            target="_blank" 
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030902002963" 
            class="secuity-name-img"
          >
          粤网公安备44030902002963号
          <div class="bian-logo"><img class="logimg" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/bian.png"/></div>
          </a>
        </div>
        <div class="compay-name">公司地址：深圳市宝安区财富港国际中心D座</div>
      </div>
    </div>
    <!-- 定位右边的按钮 -->
    <div class="postion-right">
      <div 
        class="icon-name-box"
        v-for="(item,index) in postionRight"
        :key="item.id"
        @click="pulicPhone(item.id)"
      >
        <img class="iconfont" :src="item.icon"/>
        <div class="icon-name">{{ item.name }}</div>
      </div>
    </div>
    <!-- 定位到中间的二维码 ---电话 -->
    <div class="postion-conter" v-if="isPhoneShow">
      <div class="code-img"  v-if="isPhoneShow" :class="{testenter:isPhoneShow}">
        <img class="code" src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/PC_V1.0.1/public_code.jpg">
      </div>
    </div>
    <!-- 定位到底部的按钮 -->
    <div class="footer">
      <div class="btnget" @click="promptlyGet">下载APP</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  name: 'Moveweb',
  data() {
    return {
      pathUrl:'',
      business:require('../../assets/business.jpg'),
      teacherList: [
        { 
          id: 1, 
          name: '上课全程监督',
          subTitle: '即时在线答疑',
          urlImg: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/move/move5.png'
        },
         { 
          id: 2, 
          name: '严选老师',
          subTitle: '专属辅导',
          urlImg: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/move/move6.png'
        },
         { 
          id: 3, 
          name: '无限次回放',
          subTitle: '有效期内',
          urlImg: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/move/move7.png'
        }
      ],
      moveList: {
        homeImg: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/move/master1.png',
        feature: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/move/move2.png'
      },
      gotop: false, // 滚动状态
      isPhoneShow: false, // 电话号码显示与隐藏
      // pupopState: false, // 
      times: null, // 定时器时间
      postionRight: [
          { id: 1, name: '下载APP', icon: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/move/download.png'},
          { id: 2, name: '公众号', icon: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/move/Official.png'},
          { id: 3, name: '返回顶部', icon: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/pc/move/top.png'}
      ]
    }
  },

  computed: {},
  created() {
    if(!this.isWechat()){
      this.postionRight.splice(1,1)
    }
    this.pathUrl = window.location.href.split('?')[1]
    // 判断是手机还是pc-- //判断是否为移动端的设备，是移动端的话  跳转  mobile 页面
    if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    } else {
      this.$router.push(`/?${this.pathUrl ? this.pathUrl : ''}`)
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },

  methods: {
    // downloadType=1是安卓下载
    // 判断是否是微信环境
    isWechat() {  
    let ua = window.navigator.userAgent.toLowerCase();  
    if (ua.match(/micromessenger/i) == 'micromessenger') { 
        return true;  
      } else {  
        return false;  
      }  
    }, 
    // 下载
    promptlyGet() {
      this.$router.push(`/download?${this.pathUrl ? this.pathUrl : ''}`)
    },
    // 滚动事件
    handleScroll() {
      let scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
      scrolltop > 30 ? (this.gotop = true) : (this.gotop = false);
    },
    // 点击公众号与电话与回到顶部
    pulicPhone(id) {
      if(id === 1) {
        this.$router.push(`/download?${this.pathUrl ? this.pathUrl : ''}`)
      }
      if(id === 2){
        this.isPhoneShow = true
      }
      if(id === 3) {
        let top = document.documentElement.scrollTop || document.body.scrollTop;
        // 实现滚动效果 
        const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
          if (top <= 0) {
            clearInterval(timeTop);
          }
        }, 10)
      }
      clearTimeout(this.times)
      this.times = setTimeout(() => {
        this.iscodeImgShow = false
        this.isPhoneShow = false
      },2000)
    }
  }
}
</script>
<style lang='scss' scoped>
  .trialClass-img{
    padding-bottom: 14.933vw;
    .item-img{
      display: block;
      width: 100%;
      height: 132.533vw;
      object-fit: cover;
    }
    .my-feature{
      width: 70.4vw;
      height: 8.533vw;
      margin: auto;
      position: relative;
      .feature-img{
        display: block;
        width: 100%;
        height: 100%;
      }
      .my-title{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        line-height: 8.533vw;
        text-align: center;
        font-weight: bold;
        font-size: 4.8vw;
        color: #FFFFFF;
      }
    }
    // 特色动图
    .gifImg-list{
      padding: 3.467vw 6.4vw 3.733vw 6.4vw;
      .item-conter-img{
       width: 100%;
       height: 245.2vw;
       position: relative;
       .gif-text{
         display: block;
         width: 100%;
         height: 100%;
         object-fit: cover;
       }
      }
    }
    // 科学规划
    .scientific{
      width: 100%;
      position: relative;
      .back-box{
        width: 100%;
        height: 100%;
        .back-img{
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .promote{
        width: 92.267vw;
        height: 141.867vw;
        object-fit: cover;
        position: absolute;
        top: 9.067vw;
        left: 1.6vw;
      }
    }
   
   //  贴心服务
   .serve{
     .serve-title{
       display: flex;
       align-items: center;
       justify-content: center;
       margin: auto;
       margin-top: 4.8vw;
       font-weight: bold;
       font-size: 4.8vw;
        color: #333333;
     }
     .teacher-box{
       padding: 10.667vw 13.867vw 13.867vw 11.2vw;
       display: flex;
       align-items: center;
       justify-content: space-between;
       .item-img-name{
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         .img{
           display: block;
           width: 14.933vw;
           height: 14.933vw;
           object-fit: cover;
         }
         .name{
           font-weight: bold;
            font-size: 3.2vw;
            text-align: center;
            color: #333333;
            margin: 2.667vw 0 0.533vw 0;
         }
         .subTitle{
           font-size: 3.2vw;
            text-align: center;
            color: #666666;
         }
       }
     }
  }
  // 人才招聘
  .invite{
    padding: 0  0 3.2vw 5.333vw;
    font-size: 3.2vw;
    color: #262626;
    .business{
      display: flex;
      // align-items: center;
      .business-title{
        width: 16vw;
      }
    }
  }
  // 底部
  .footer-company{
    width: 100%;
    height: 34.667vw;
    background: #343333;
    padding: 3.2vw 0 0 5.333vw;
    font-size: 2.667vw;
    .company{
      color: #FFFFFF;
    }
    .secuity-name-img{
      display: block;
      text-decoration:none;
      color: #999999;
       margin-bottom: 0.533vw;
    }
    .icpcode{
      display: flex;
      align-items: center;
      .secuity-name-img{
        text-decoration:none;
        color: #999999;
        display: flex;
        align-items: center;
        .bian-logo {
          width: 2.667vw;
          height: 2.667vw;
          .logimg{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .compay-name{
      color: #999999;
    }
  }
}

  // 定位到右边的公众号
  .postion-right{
    padding: 4vw 2vw;
    background: rgba(250,250,250,0.6);
    backdrop-filter: blur(5.333vw);
    -webkit-backdrop-filter: blur(5.333vw);
    -moz-backdrop-filter: blur(5.333vw);
    -ms-backdrop-filter: blur(5.333vw);
    border-radius: 4vw 0 0 4vw;
    position: fixed;
    top: 30%;
    right: 0;
    z-index: 11;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    .icon-name-box:nth-of-type(2){
      margin: 4vw 0 !important;
    }
    .icon-name-box{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .iconfont{
        display: block;
        width: 11.2vw;
        height: 11.2vw;
      }
      .icon-name{
        font-weight: bold;
        font-size: 3.2vw;
        color: #FFF3F3;
        text-shadow: 0px 0px 1.067vw #000;
      }
    }
  }
  // 定位费到中间的二维码
  .postion-conter{
    width: 34.4vw;
    height: 34.4vw;
    position: fixed;
    top:35%;
    left: 0;
    right: 0;
    z-index: 12;
    margin: auto;
     .code-img{
        width: 34.4vw;
        height: 34.4vw;
        border-radius: 10px;
        .code{
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 1.333vw;
        }
     }
    //  二维码动画
     .testenter{
         animation: testenter 0.65s;
      }
       @keyframes testenter {
         0% {
        transform: translateX(150%);
        opacity: 0;
      }

      50% {
        transform: translateX(-8%);
        opacity: 0.2;
      }

      65% {
        transform: translateX(4%);
        opacity: 0.4;
      }

      80% {
        transform: translateX(-4%);
        opacity: 0.6;
      }

      95% {
        transform: translateX(2%);
        opacity: 0.8;
      }

      100% {
        transform: translateX(0%);
        opacity: 1;
      }
    }
    .phone{
      font-size: 4.267vw;
       padding: 1.333vw 4vw;
       background: #FFFFFF;
       border-radius: 1.333vw;
    }
  }
  // 定位到底部
  .footer{
    width: 100vw;
    height: 16vw;
    background:  #262626;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5.333vw;
    margin: auto;
      .btnget{
       width: 100%;
       height: 11.733vw;
       border-radius: 5.867vw;
       line-height: 11.733vw;
       font-weight: bold;
       background: #FF800C;
       text-align: center;
       color: #FFFFFF;
       animation-fill-mode: both;
       animation: btnget 0.75s infinite 1s;
       font-size: 6.4vw;
       font-weight: bold;
       letter-spacing: 0.2em;
    }
     @keyframes btnget {
        0% { transform: scale(1,1);}
        50% { transform: scale(0.95,0.95);}        
        100% { transform: scale(1,1);}
      }
  }
</style>
